<template>
	<!-- 对账单管理页面 -->
	<a-card :bordered="false">
		<!-- 顶部筛选 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" labelAlign="right">
				<a-row :gutter="48">
					<a-col :md="8" :sm="24">
						<a-form-item label="供应商">
							<a-input v-model="queryParam.orgIdSupplierName" placeholder="请输入" />
						</a-form-item>
					</a-col>
					<a-col :md="8" :sm="24">
						<a-form-item label="送货月份">
							<a-month-picker style="width: 100%;" :valueFormat="'YYYY-MM-DD HH:mm:ss'" :format="'YYYY-MM'"
								v-model="queryParam.monthTime" placeholder="请选择" />
						</a-form-item>
					</a-col>
					<a-col :md="8" :sm="24">
						<a-form-item label="状态">
							<a-radio-group default-value="" button-style="solid" v-model="queryParam.reconciliationStatus">
								<a-radio-button value="">
									全部
								</a-radio-button>
								<a-radio-button :value="id"
									v-for="{ id, name } in [{ id: '1', name: '待对账' }, { id: '2', name: '待开票' }, { id: '3', name: '待付款' }, { id: '4', name: '已完成' }]">
									{{ name }}
								</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col>
					<!-- <a-col :md="8" :sm="24">
						<a-form-item label="入库时间">
							<a-range-picker style="width:100%" v-model="queryParam.timeList" format="YYYY-MM-DD" />
						</a-form-item>
					</a-col> -->
					<!-- <a-col :md="24" :sm="24">
						<a-form-item label="供  应  商">
							<a-radio-group default-value="" button-style="solid" v-model="queryParam.orgIdSupplier">
								<a-radio-button value="">
									全部
								</a-radio-button>
								<a-radio-button :value="id"
									v-for="{ id, name } in $util.getOrgList([this.$businessEnum.ORG_TYPE_ENUM.PRIMARY_SUPPLIER.id, this.$businessEnum.ORG_TYPE_ENUM.NORMAL_SUPPLIER.id])"
									:key="id">
									{{ name }}
								</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col> -->
					<a-col :md="8" :sm="24">
						<span class="table-page-search-submitButtons">
							<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
							<a-button @click="queryParam = { reconciliationStatus: '' }; $refs.table.refresh(true)">重置</a-button>
							<Export text="导出" title="对账单" url="/emsReconciliationOrder/export" :obj="{
								orgIdSupplierName: queryParam.orgIdSupplierName,
								monthTime: queryParam.monthTime,
								reconciliationStatus: queryParam.reconciliationStatus,
							}" />
						</span>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<!-- 表格 -->
		<!-- <div style="display: flex;align-items:flex-end;justify-content: space-between;">
			<div class="selectText">
				<span>当前表格已选中 <span class="bold">{{ selectedRows.length }}</span> 项</span>
				<span style="cursor: pointer;" @click="clearSelect">清除</span>
			</div>
		</div> -->
		<s-table ref="table" :scroll="{ x: 1400, y: 'auto' }" size="default" :columns="columns" :data="loadData"
			:alert="true">
			<span slot="reconciliationStatus" slot-scope="text, record">
				<a-tag color="#2db7f5" v-if="record.reconciliationStatus == 1">待对账</a-tag>
				<a-tag color="#2db7f5" v-if="record.reconciliationStatus == 2">待开票</a-tag>
				<a-tag color="#2db7f5" v-if="record.reconciliationStatus == 3">待付款</a-tag>
				<a-tag color="#87d068" v-if="record.reconciliationStatus == 4">已完成</a-tag>
				<!-- <span v-if="record.reconciliationStatus == 1"></span>
				<span v-if="record.reconciliationStatus == 2"></span>
				<span v-if="record.reconciliationStatus == 3"></span>
				<span v-if="record.reconciliationStatus == 4">已完成</span> -->
			</span>
			<!-- <span slot="remark" slot-scope="text, record">
				<a-textarea @blur="remarkBlur(record)" v-model="record.remark" :auto-size="{ minRows: 2 }" :disabled="record.reconciliationStatus == 4" />
			</span> -->
			<!-- 操作 -->
			<span slot="action" slot-scope="text, record">
				<a-button type="link" v-if="record.reconciliationStatus == 1"
					@click="$refs.reconciliationForm.init(record)">对账</a-button>
				<a-button type="link" v-if="record.reconciliationStatus == 2 || record.reconciliationStatus == 3"
					@click="$refs.invoiceOrPaymentForm.invoice(record)">开票</a-button>
				<a-button type="link" v-if="record.reconciliationStatus == 2 || record.reconciliationStatus == 3"
					@click="$refs.invoiceOrPaymentForm.payment(record)">付款</a-button>

				<a-button type="link" v-if="record.reconciliationStatus != 4" @click="editRemark(record)">备注</a-button>
				<a-button type="link" v-if="record.reconciliationStatus == 4"
					@click="$refs.invoiceOrPaymentForm.readonly(record, 1)">开票</a-button>
				<a-button type="link" v-if="record.reconciliationStatus == 4"
					@click="$refs.invoiceOrPaymentForm.readonly(record, 2)">付款</a-button>
				<a-button type="link" @click="$refs.reconciliationForm.details(record)">详情</a-button>
			</span>
		</s-table>
		<!--  新增编辑详情弹框  -->
		<addAndEdit ref="addAndEdit" />
		<reconciliation-form ref="reconciliationForm" @ok="handleOk" />
		<invoiceOrPaymentForm ref="invoiceOrPaymentForm" />
		<a-modal title="编辑备注" :visible="visible" :confirm-loading="confirmLoading" @ok="handleEdit"
			@cancel="visible = false">
			<p>
				<a-textarea v-model="currentRow.remark" :auto-size="{ minRows: 2 }" />
			</p>
		</a-modal>
	</a-card>
</template>

<script>
import { STable } from '@/components'
import { getUrlParam, MATERIAL_TYPE_ENUM, ORDER_TYPE_ENUM } from '@/utils/util'
import {
	billPage,
	billEdit
} from '@/api/modular/main/bill'
import addAndEdit from './addAndEdit'

import reconciliationForm from './reconciliationForm.vue'
import invoiceOrPaymentForm from './invoiceOrPaymentForm.vue'

export default {
	components: {
		STable,
		addAndEdit,
		reconciliationForm,
		invoiceOrPaymentForm
	},
	computed: {
		urlParam() {
			return getUrlParam(this.$route.path)
		},
		poolType() {
			return this.urlParam.poolType;
		},
		materialType() {
			return this.urlParam.materialType;
		},
		ORDER_TYPE_ENUM() {
			return ORDER_TYPE_ENUM;
		},
		materialTypeList() {
			let value = [{ id: '', name: '全部', code: 'all' }]
			for (const key in MATERIAL_TYPE_ENUM) {
				value.push(MATERIAL_TYPE_ENUM[key])
			}
			return value
		},
	},
	watch: {
		'$route.path': function () {
			this.queryParam.materialType = this.urlParam.materialType
			setTimeout(() => {
				this.$refs.table.refresh(true)
				this.selectedRows.length = []
			}, 100)
		}
	},
	data() {
		return {
			queryParam: {},  // 查询参数
			selectedRows: [],
			statusList: [
				{ label: '待对账', value: 1, color: '#1cd3e8' },
				{ label: '待开票', value: 2, color: '#b2e81c' },
				{ label: '待付款', value: 3, color: '#f0aa13' },
				{ label: '已完成', value: 4, color: '#33ff33' },
			],
			columns: [
				{
					title: '序号',
					width: '80px',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '供应商',
					width: '120px',
					dataIndex: 'orgIdSupplierName'
				},
				{
					title: '送货月份',
					width: '120px',
					dataIndex: 'monthTime'
				},
				{
					title: '状态',
					width: '120px',
					dataIndex: 'reconciliationStatus',
					scopedSlots: { customRender: 'reconciliationStatus' }
				},
				{
					title: '送货金额(元)',
					width: '150px',
					dataIndex: 'amount'
				},
				{
					title: '对账确认金额(元)',
					width: '150px',
					dataIndex: 'confirmAmount'
				},
				{
					title: '开票日期',
					width: '120px',
					dataIndex: 'invoiceTime'
				},
				{
					title: '已开票金额(元)',
					width: '150px',
					dataIndex: 'invoiceAmount'
				},
				{
					title: '未开票金额(元)',
					width: '150px',
					dataIndex: '',
					customRender: (text, record, index) => record.confirmAmount - record.invoiceAmount
				},
				{
					title: '预计付款日期',
					width: '150px',
					dataIndex: 'prePayTime'
				},
				{
					title: '实际付款日期',
					width: '120px',
					dataIndex: 'payTime'
				},
				{
					title: '已付款金额(元)',
					width: '150px',
					dataIndex: 'payAmount'
				},
				{
					title: '未付款金额(元)',
					width: '150px',
					dataIndex: '',
					customRender: (text, record, index) => record.confirmAmount - record.payAmount
				},
				{
					title: '备注',
					width: '120px',
					dataIndex: 'remark',
					escape: true,
					// scopedSlots: { customRender: 'remark' }
				},
				{
					title: '操作',
					// align: 'center',
					width: '250px',
					fixed: 'right',
					scopedSlots: { customRender: 'action' }
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				// let query = {
				// 	...this.queryParam,
				// 	...parameter,
				// 	materialType: this.materialType,
				// 	startTime: this.appendTime(this.queryParam.timeList)[0],
				// 	endTime: this.appendTime(this.queryParam.timeList)[1],
				// }
				// delete query.timeList
				this.queryParam.isMonthSettlement = 2 //是否月结isMonthSettlement 1否2是
				return billPage(Object.assign(parameter, this.queryParam)).then(res => {
					return res.data
				})
			},
			scheduleProductionVisible: false,
			selectedRowKeys: [],
			selectedRows: [],
			defaultExpandedKeys: [],
			replaceFields: {
				key: 'id',
			},
			currentRow: {},
			visible: false,
			confirmLoading: false,
		}
	},
	methods: {
		editRemark(record) {
			console.log(record);
			this.visible = true;
			this.currentRow = record;
		},
		handleEdit() {
			console.log(this.currentRow);
			this.confirmLoading = true;
			billEdit({
				reconciliationOrderId: this.currentRow.reconciliationOrderId,
				remark: this.currentRow.remark
			}).then(res => {
				this.$message.success("编辑成功");
				this.confirmLoading = false;
				this.visible = false;
				this.handleOk();
			})
		},
		handleClickBtn(e) {
			let text = e == 1 ? '待对账' : e == 2 ? '待开票' : e == 3 ? '待付款' : ''
			if (this.selectedRows.length == 0) {
				return this.$message.error('请选择数据')
			} else if (this.selectedRows[0].reconciliationStatus != e) {
				return this.$message.error('请选择状态为 ' + text + ' 的数据')
			}
			let query = {
				orderIds: this.selectedRows.map(item => item.sourceOrderId)
			}
			// 1对账  2开票   3付款
			if (e == 1) {
				reconciliation(query).then(res => {
					this.$message.success('对账完成')
				})
			} else if (e == 2) {
				invoicing(query).then(res => {
					this.$message.success('开票完成')
				})
			} else if (e == 3) {
				payment(query).then(res => {
					this.$message.success('付款完成')
				})
			}
			this.selectedRows = []
			this.$refs.table.refresh()
		},
		// 清除选中
		clearSelect() {
			this.selectedRows = []
		},
		// 表格选择按钮点击事件
		handleClickSelectBtn(record) {
			console.log()
			let i = this.selectedRows.findIndex(item => item.sourceOrderId == record.sourceOrderId)
			if (i == -1) {
				this.selectedRows.push(record)
			} else {
				this.selectedRows.splice(i, 1)
			}
		},
		handleOk() {
			this.$refs.table.refresh()
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
